<!--
 * @Author: your name
 * @Date: 2021-07-13 22:45:17
 * @LastEditTime: 2021-07-16 09:27:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习库e:\72-briup\briupteamproj\src\views\components\Works\Work.vue
-->
<template>
  <div>
    <div class="work_box">
      <div class="work_box_header">
        <div class="work_box_title">{{ workName }}</div>
        <div class="work_box_more"><img :src="more" alt="" /></div>
      </div>
      <ul class="art">
        <li
          class="article"
          @click="toArticle(item.id)"
          v-for="item in work"
          :key="item.id"
        >
          <div class="title">
            <img :src="xiaoyuandian" alt="" />
            {{ item.title }}
          </div>
          <div class="publish_time">
            {{ item.publishTime | fmtDate }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { get } from '../../../utils/request'
export default {
  // data() {
  // },
  props: {
    work: {
      type: Array,
      default() {
        return []
      },
    },
    workName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      articleData: {},
      param: {
        page: 1,
        pageSize: 5,
      },
      name: '',
      xiaoyuandian: '',
      more: '',
    }
  },
  created() {
    this.loadXiaoyuandian()
    this.loadMore()
  },
  methods: {
    loadMore() {
      let url = '/index/findByKey'
      get(url, { name: 'more' }).then((resp) => {
        if (resp.data) {
          this.more = resp.data.val
        }
      })
    },
    loadXiaoyuandian() {
      let url = '/index/findByKey'
      get(url, { name: 'xiaoyuandian' }).then((resp) => {
        if (resp.data) {
          this.xiaoyuandian = resp.data.val
        }
      })
    },
    toArticle(articleId) {
      this.$router.push({
        path: '/article',
        query: { articleId },
      })
    },
  },
}
</script>
<style scoped>
.works .work_box {
  width: 49%;
  height: 215px;
  float: left;
  background-color: #fff;
  margin: 0;
  /* border: 1px solid blue;
  border-image: -webkit-linear-gradient(blue, #fff) 20 20;
  border-image: -moz-linear-gradient(blue, #fff) 20 20;
  border-image: -o-linear-gradient(blue, #fff) 20 20;
  border-image: linear-gradient(blue, #fff) 20 20;
  border-radius: 30upx; */
  background-image: linear-gradient(#D7EAF1, rgb(255, 255, 255));
  overflow: hidden;
  border-radius: 3px;
  margin-top: 10px;
  margin-right: 7px;
}
.work_box_title {
  font-size: 1.1em;
  font-weight: bolder;
  padding-top: 3px;
  color: #fff;
  background-color: rgb(150, 211, 232);
  background-image: linear-gradient(
    to top,
    #3C81BF,
    rgb(127, 154, 204)
  );
  width: 100px;
  height: 85%;
  text-align: center;
  border-radius: 0 0 3px 3px;
  display: inline-block;
  margin-left: 20px;
}
.work_box_header {
  width: 100%;
  height: 30px;
  overflow: hidden;
  /* background-color: rgb(127, 154, 204); */
  background-image: linear-gradient(
    to top,
   #D4EDF3,
   #fff
  );
  border: 1px solid rgb(179, 217, 228);
  border-radius: 5px 5px 0 0;
}
.work_box_more {
  display: inline-block;
  float: right;
  margin-right: 7px;
  margin-top: 5px;
}
.work_box_more > img {
  cursor: pointer;
}
.art {
  padding: 5px;
  margin: 0;
}
.article {
  padding: 5px;
  border-radius: 3px;
  background-color: white;
  display: flex;
  flex-direction: row;
  line-height: 1.5em;
  height: 1.5em;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  color: black;
  border-bottom: 1px dashed #666;
}
.article > .title {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.article > .publice_time {
  width: 100px;
  text-align: right;
}
</style>
